<template>
    <el-select v-model="model" placeholder="选择词条" multiple :loading="isLoading !== 0">
        <template #header>
            <div>
                <el-input v-model.trim="tagName" placeholder="请输入标签内容" clearable @input="getTagList"></el-input>
            </div>
        </template>
        <template #default>
            <el-option v-for="item in tagOptions" :key="item.id" :label="item.name" :value="item.id" />
        </template>
        <template #empty>
            <el-button type="primary" bg size="small" @click="onAddOption">没有该词条？点此创建</el-button>
        </template>
        <template #loading>
            <el-icon class="is-loading">
                <svg class="circular" viewBox="0 0 20 20">
                    <g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none">
                        <circle r="3.375" class="dot1" rx="0" ry="0" />
                        <circle r="3.375" class="dot2" rx="0" ry="0" />
                        <circle r="3.375" class="dot4" rx="0" ry="0" />
                        <circle r="3.375" class="dot3" rx="0" ry="0" />
                    </g>
                </svg>
            </el-icon>
        </template>
    </el-select>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
// 引入防抖
import { debounce } from "lodash";
// 引入接口
import { reqTagList, reqCreateTag } from "@/api/tag";

const model = defineModel();
// 选择框的选项
// eslint-disable-next-line no-undef
const tagOptions = ref<Tag[]>([]);
// 加载态的控制（使用数字是为了防止前面的请求取消了后面请求的加载态）
const isLoading = ref<number>(0);
// 记录搜索框的字段
const tagName = ref("");
// 添加新词条
const onAddOption = async () => {
    const result = await reqCreateTag({
        tagName: tagName.value,
    });
    if (result.code === 200 && typeof result.data === "object") {
        ElMessage.success("创建新词条成功");
        // 添加成功后重新获取列表
        getTagList();
    } else {
        ElMessage.error(result.data as string);
    }
};
// 获取词条相关的列表

// 定义一个中断控制器
const controller = ref(new AbortController());
// 使用防抖
const getTagList = debounce(async () => {
    // 请求数量自增
    isLoading.value++;
    // 取消上一次请求
    controller.value.abort();
    // 重新生成控制器
    controller.value = new AbortController();
    const result = await reqTagList(tagName.value, controller.value.signal);
    // 请求数量自减
    isLoading.value--;
    if (result.code === 0) {
        // 请求中断
        return;
    } else if (result.code === 200 && typeof result.data === "object") {
        // 获取数据成功
        tagOptions.value = result.data;
    } else {
        // 获取数据失败
        ElMessage.error(result.data as string);
    }
}, 500);
</script>

<style lang="scss">
.el-select-dropdown__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100px;
    font-size: 20px;
}

.circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
}
.loading-path .dot1 {
    transform: translate(3.75px, 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
}
.loading-path .dot2 {
    transform: translate(calc(100% - 3.75px), 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.4s;
}
.loading-path .dot3 {
    transform: translate(3.75px, calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 1.2s;
}
.loading-path .dot4 {
    transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.8s;
}
@keyframes loading-rotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes custom-spin-move {
    to {
        opacity: 1;
    }
}
</style>
